<template>
  <div class="Loginbox">
    <div class="back flex middle center">
      <img src="@/assets/images/logo.png" class="logo-icon" />
      <div class="leftbor">
        <img :src="log" class="logo" />
      </div>
      <div class="flex end mlpoint10">
        <a-form
          ref="formRef"
          :model="formData"
          class="login"
          :rules="formRules"
          autocomplete="off"
          label-position="left"
        >
          <h3 class="title">
            <span class="lg name">用户登录</span>
          </h3>
          <AFormItem name="account" class="enter-x">
            <AInput
              v-model:value="formData.account"
              size="large"
              placeholder="请输入账号"
              class="fix-auto-fill"
            >
              <template #prefix>
                <user-outlined />
              </template>
            </AInput>
          </AFormItem>
          <AFormItem name="pwd" class="enter-x">
            <AInputPassword
              v-model:value="formData.pwd"
              size="large"
              visibility-toggle
              placeholder="请输入密码"
            >
              <template #prefix>
                <lock-outlined />
              </template>
            </AInputPassword>
          </AFormItem>

          <AFormItem name="code" class="enter-x">
            <AInput
              v-model:value="formData.code"
              size="large"
              placeholder="请输入验证码"
              class="fix-auto-fill"
            >
              <template #prefix>
                <safety-certificate-outlined />
              </template>
              <template #addonAfter>
                <div
                  class="captchaPic"
                  style="vertical-align: middle"
                  @click="getCaptcha()"
                >
                  <img class="" :src="state.captchaPath" />
                </div>
              </template>
            </AInput>
            <div class="flex middle mb30">
              <div class="flex middle" @click="select">
                <icon-svg
                  :name="state.autoLogin ? 'check' : 'uncheck'"
                  class="check-icon mr5"
                />
                <div class="l cursor">自动登录</div>
              </div>
              <div class="cell-main right" @click="forget">
                <span class="l cursor">忘记密码</span>
              </div>
            </div>
            <AButton
              type="primary"
              block
              class="mb30"
              @click.prevent="handleLogin"
            >
              登录
            </AButton>
          </AFormItem>
        </a-form>
      </div>
    </div>
    <div class="foot center">@2019 智能环卫管理后台 闽ICP备19013936号</div>
  </div>
</template>

<script lang="ts" setup name="login">
// import { login } from 'api/sys'
import log from "./img/log.jpg";
import { onMounted, reactive, ref, unref, watchEffect } from "vue";
import { captchaApi } from "@/api/user";

import { useRoute, useRouter } from "vue-router";
import type { ILoginState, ILoginFrom } from "@/types/login";
const formRules = {
  account: [{ required: true, trigger: "blur", message: "请输入用户名" }], // validator: validateUsername
  pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
  code: [{ required: true, message: "请输入正确的验证码", trigger: "blur" }],
};

const formRef = ref();
const pwdRef = ref();
const user_store = useUserStore();
// route是响应式对象,可监控器变化
const route = useRoute();
// 获取路由器实例
const router = useRouter();
const formData = reactive<ILoginFrom>({
  account: "admin", // admin
  pwd: "123456",
  key: "",
  code: "",
  captcha: {
    captchaVerification: "",
    secretKey: "F8jNG8wJ4GSdiKKF",
    token: "04519eb831c449b89b0c98796dcb228f",
  },
});

const state = reactive<ILoginState>({
  captchaPath: "",
  autoLogin: true,
  loading: false,
  redirect: "/",
  passwordType: "password",
});

watchEffect(() => {
  state.redirect = ((route.query && route.query.redirect) as string) || "/";
});
onMounted(() => {
  getCaptcha();
});
async function getCaptcha() {
  const captcha = await captchaApi();
  state.captchaPath = captcha.code;
  formData.key = captcha.key;
}
async function showPwd() {
  if (state.passwordType === "password") {
    state.passwordType = "";
  } else {
    state.passwordType = "password";
  }
  await nextTick();
  pwdRef.value.focus();
}
function select() {
  state.autoLogin = !state.autoLogin;
}
function handleRoute() {
  return state.redirect === "/404" || state.redirect === "/403"
    ? "/"
    : state.redirect;
}
async function handleLogin() {
  const form = unref(formRef);
  if (!form) return;
  await form.validate();
  await user_store.userLogin(formData).catch(() => {
    // 重新获取验证码
    if (state.captchaPath) {
      getCaptcha();
    }
  });
  router.push({ path: "/" });
}
function forget() {
  router.replace({ name: "forget" });
}
</script>

<style lang="less" scoped>
.Loginbox {
  .ant-btn-primary {
    background: #00cd76;
    color: #fff;
    width: 100%;
    border-color: #00cd76;

    &:hover {
      border-color: #00cd76;
    }
  }
}

@dark_gray: #889aa4;

.logo {
  height: 450px;
  width: 600px;
}

.foot {
  position: absolute;
  width: 100%;
  bottom: 0;
  line-height: 60px;
  color: #333;
}

.logo-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 36px;
  margin: 20px 30px;
}

.captchaPic {
  display: block;
  height: 36px;
  width: 120px;

  img {
    height: 36px;
    width: 120px;
  }
}

.leftbor {
  border-right: 1px solid #67c23a;
}

.Loginbox {
  height: 100%;
  width: 100%;

  .mb30 {
    margin-bottom: 30px;
  }

  .mlpoint10 {
    margin-left: 10%;
  }

  .back {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 0;
    right: 0;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    // background:rgba(255,255,255,.85);
  }

  .login {
    background: #fff;
    width: 500px;
    border: 1px solid #67c23a;
    border-radius: 4px;
    padding: 70px 60px;
    box-sizing: border-box;
    box-shadow: 0 0 18px rgba(232, 237, 250, 0.2);
    animation: loginIn 1s;

    @keyframes loginIn {
      0% {
        transform: translateY(20px);
        opacity: 0;
      }
    }
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .icon {
    padding: 6px 5px 6px 15px;
    color: @dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .name {
    letter-spacing: 2px;
    font-weight: bolder;
    color: #565;
  }

  .title {
    margin-bottom: 30px;
    font-size: 16px;
    text-align: center;

    i {
      width: 1px;
      height: 10px;
      float: left;
      background: #fff;
      margin: 15px 15px 0;
      opacity: 0.5;
    }

    .sub {
      font-weight: 500;
      font-size: 16px;
      float: left;
      color: #fff;
      opacity: 0.5;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: @dark_gray;
    cursor: pointer;
    user-select: none;

    ::v-deep.svg-icon {
      vertical-align: 0.3em;
    }
  }
}
</style>
